
// src/pages/index.tsx
"use client";
import { useState } from 'react';
import { HorizontalScroll } from '../components/HorizontalScroll';
import { VerticalList } from '../components/VerticalList';
import { AppCard } from '../components/AppCard';
import { SearchBar } from '../components/SearchBar';
import { useAppData } from '../hooks/useAppData';
import { App } from '../types/app';

const filterApps = (apps: App[], searchTerm: string) => {
  if (!searchTerm) return apps;
  
  return apps.filter(app => 
    app.name.toLowerCase().includes(searchTerm) ||
    app.artistName.toLowerCase().includes(searchTerm) ||
    app.description.toLowerCase().includes(searchTerm)
  );
};

const HomePage = () => {
  const { recommended, freeApps } = useAppData();
  const [searchTerm, setSearchTerm] = useState('');
  
  const filteredRecommended = filterApps(recommended, searchTerm);
  const filteredFreeApps = filterApps(freeApps, searchTerm);

  return (
    <div className="container">
      <SearchBar onSearch={setSearchTerm} />
      
      {!searchTerm && (
        <>
          <h1>Recommend</h1>
          <HorizontalScroll>
            {filteredRecommended.map((app) => (
              <AppCard key={app.id} app={app} />
            ))}
          </HorizontalScroll>
        </>
      )}

      <h1>{searchTerm ? 'Result' : 'APP List'}</h1>
      <VerticalList>
        {filteredFreeApps.map((app, index) => (
          <AppCard flex={true} key={app.id} app={app} index={index} />
        ))}
        {filteredFreeApps.length === 0 && (
          <div className={'noResults'}>未找到匹配的应用</div>
        )}
      </VerticalList>
    </div>
  );
};

export default HomePage;